<template>
  <div>
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm" @submit.prevent>
        <search-input
          label="数据源名称"
          v-model="searchForm.fuzzyName"
          :search="getData"
        />
        <el-form-item>
          <search-button :search="getData" />
          <reset-button :search-form="searchForm" :search="getData" />
        </el-form-item>
      </el-form>
    </div>

    <div class="jaguar-control">
      <add-button @click="handleCreate" />
    </div>

    <div class="jaguar-table">
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="host" label="host" />
        <el-table-column prop="port" label="port" />
        <el-table-column prop="schema" label="schema" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <view-button @click="handleView(scope.row)" />
            <edit-button @click="handleUpdate(scope.row)" />
            <delete-button @click="handleDelete(scope.row)" />
          </template>
        </el-table-column>
      </el-table>

      <table-page :page="page" :search="getData" />
    </div>

    <Edit :dialog="dialog" @success="getData()" />
  </div>
</template>
<script>
import { fetchList, del } from '@/api/codegen/datasource'
import Edit from './Edit'

export default {
  name: 'Datasource',
  data() {
    return {
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      dialog: {
        id: null,
        operation: null,
        visible: false,
      },
    }
  },
  components: {
    Edit,
  },
  created() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      fetchList(
        Object.assign(
          {
            descs: 'update_time',
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      ).then((res) => {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
      })
    },
    handleCreate() {
      this.dialog.entity = null
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleUpdate(row) {
      this.dialog.entity = row
      this.dialog.operation = 2
      this.dialog.visible = true
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    handleDelete(row) {
      this.$confirm('是否确认删除【' + row.name + '】', '提示', {
        type: 'warning',
        closeOnClickModal: false,
      })
        .then(() => {
          del(row.id).then(() => {
            this.$message.success('删除成功')
            this.getData()
          })
        })
        .catch(console.debug)
    },
  },
}
</script>
